<template>
    <tbody>
    <tr v-for="list in tableData" :key="list.id">
        <td class="text-center">
            <label>
                <input type="checkbox" :value="list.id" data-type="checkbox"/>
            </label>
        </td>
        <td v-for="td in list.data" :key="td.id" class="text-center" v-html="td"></td>
        <td class="text-center">
            <button v-show="visibility.edit" class="btn btn-primary" @click="edit(list.id)">
                <i class="fa fa-edit"></i>
            </button>
            <button v-show="visibility.trash" class="btn btn-warning" @click="trash(list.id)"><i
                class="fa fa-trash-o"></i>
            </button>
            <button v-show="visibility.info" class="btn btn-success" @click="info(list.id)">
                <i class="fa fa-info"></i>
            </button>
        </td>
    </tr>
    </tbody>
</template>

<script>
    export default {
        name: 'TableBody',
        data () {
            return {
                myDataList: this.dataList,
                visibility: {
                    edit: false,
                    info: false,
                    trash: false
                }
            };
        },
        props: {
            tableData: {type: Array, required: true},
            edit: {type: Function},
            trash: {type: Function},
            info: {type: Function}
        },
        watch: {
            dataList: function (newVal) {
                this.myDataList = newVal;
            },
            edit (newVal) {
                if (newVal instanceof Function) {
                    this.visibility.trash = true;
                }
            }
        },
        mounted () {
            if (this.trash instanceof Function) {
                this.visibility.trash = true;
            }
            if (this.edit instanceof Function) {
                this.visibility.edit = true;
            }
            if (this.info instanceof Function) {
                this.visibility.info = true;
            }
        }
    };
</script>
